<template>
  <div>
    <h1>预警消息</h1>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form :inline="true" :model="loginForm" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <el-input
                  placeholder="请输入消息关键字"
                  prefix-icon="el-icon-search"
                  @keyup.enter.native="search"
                  v-model="content" clearable>
              </el-input>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple">&nbsp;&nbsp;
              <el-form-item label="日期范围：">
                <el-date-picker
                    v-model="loginForm.dateRange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" round @click="search">查询</el-button>
              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="4" style="padding-right: 0">
        <el-table
            :data="warMsgList.list"
            stripe
            style="width: 100%">
          <el-table-column
              prop="user[0].username"
              label="发送人">
          </el-table-column>
          <el-table-column
              label="">
            <template>
              <el-button  type="text" size="mini" round style="background:#fff;color: white">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="20" style="padding-left: 0"><div class="grid-content bg-purple-dark"></div>
        <el-table
            :data="warMsgList1.list"
            stripe
            style="width: 100%">
          <el-table-column
              prop="user[0].username"
              label="接收人">
          </el-table-column>
          <el-table-column
              prop="content"
              label="消息内容">
          </el-table-column>
          <el-table-column
              prop="sendTime"
              label="发送时间">
          </el-table-column>
          <el-table-column
              prop="status"
              label="发送状态">
            <template v-slot="scope">
              {{ scope.row.status === 0 ? "发送失败" : "发送成功" }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template v-slot="scope">
              <el-button  type="danger" size="mini" round @click="deleteMsg(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[8, 20, 50, 100]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
        </el-pagination>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data(){
    return{
      content:"",
      warMsgList:[],
      warMsgList1:[],

      //当前页数
      currentPage: 1,
      //每页多少条
      pageSize: 8,
      //总条数
      total:0,

      loginForm:{},
      dateRange:[],
    }
  },
  created() {
    this.loadData()
  },
  methods:{
    async loadData(){
      this.warMsgList = await request("warningMessage?content=" + this.content + "&page=" + this.currentPage + "&size=" + this.pageSize)
      this.warMsgList1 = await request("warningMessage?content=" + this.content + "&page=" + this.currentPage + "&size=" + this.pageSize)

      for (let i = 0; i < this.warMsgList.list.length; i++) {
        this.warMsgList.list[i].user = await request("user?userId=" + parseInt(this.warMsgList.list[i].senderId))
      }

      for (let i = 0; i < this.warMsgList1.list.length; i++) {
        this.warMsgList1.list[i].user = await request("user?userId=" + parseInt(this.warMsgList1.list[i].receiverId))
      }

      for (let i = 0; i < this.warMsgList1.list.length; i++) {
        if (this.warMsgList1.list[i].user.length===0 || this.warMsgList.list[i].user.length===0){
          this.warMsgList.list.splice(i,1)
          this.warMsgList1.list.splice(i,1)
          i--
        }
      }
      this.total = this.warMsgList1.total
    },
    async search(){
      this.loadData()
    },
    deleteMsg(id) {
      this.$confirm('此操作将永久删除该员工吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request("warningMessage?id=" + id, "delete").then(() => {
          this.loadData()
          Message.success("删除成功")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1
      this.loadData()
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage=val
      this.loadData()
    },
  }
}
</script>
<style scoped>
</style>

<!--
<template>
  <div>
    <h1>预警消息(邵宁爽)</h1>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form :inline="true" :model="loginForm" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <el-input
                  placeholder="请输入消息关键字"
                  prefix-icon="el-icon-search"
                  @keyup.enter.native="search"
                  v-model="content" clearable>
              </el-input>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple">&nbsp;&nbsp;
              <el-form-item label="日期范围：">
                <el-date-picker
                    v-model="loginForm.dateRange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" round @click="search">查询</el-button>
              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="4" style="padding-right: 0">
        <el-table
            :data="warMsgList"
            stripe
            style="width: 100%">
          <el-table-column
              prop="user[0].username"
              label="发送人">
          </el-table-column>
          <el-table-column
              label="">
            <template>
              <el-button  type="text" size="mini" round style="background:#fff;color: white">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="20" style="padding-left: 0"><div class="grid-content bg-purple-dark"></div>
        <el-table
            :data="warMsgList1"
            stripe
            style="width: 100%">
          <el-table-column
              prop="user[0].username"
              label="接收人">
          </el-table-column>
          <el-table-column
              prop="content"
              label="消息内容">
          </el-table-column>
          <el-table-column
              prop="sendTime"
              label="发送时间">
          </el-table-column>
          <el-table-column
              prop="status"
              label="发送状态">
            <template v-slot="scope">
              {{ scope.row.status === 0 ? "发送失败" : "发送成功" }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template v-slot="scope">
              <el-button  type="danger" size="mini" round @click="deleteMsg(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[8, 20, 50, 100]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
        </el-pagination>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data(){
    return{
      content:"",
      warMsgList:[],
      warMsgList1:[],

      //当前页数
      currentPage: 1,
      //每页多少条
      pageSize: 8,
      //总条数
      total:0,

      loginForm:{},
      dateRange:[],
    }
  },
  created() {
    this.loadData()
  },
  methods:{
    async loadData(){
      this.warMsgList = await request("warningMessage?content=" + this.content)
      this.warMsgList1 = await request("warningMessage?content=" + this.content)

      for (let i = 0; i < this.warMsgList.length; i++) {
        this.warMsgList[i].user = await request("user?userId=" + parseInt(this.warMsgList[i].senderId))
      }
      // + "&page=" + this.currentPage + "&size=" + this.pageSize
      for (let i = 0; i < this.warMsgList1.length; i++) {
        this.warMsgList1[i].user = await request("user?userId=" + parseInt(this.warMsgList[i].receiverId))
      }

      for (let i = 0; i < this.warMsgList.length; i++) {
        if (this.warMsgList[i].user.length===0 || this.warMsgList1[i].user.length===0){
          this.warMsgList.splice(i,1)
          this.warMsgList1.splice(i,1)
          i&#45;&#45;
        }
      }
    },
    async search(){
      this.loadData()
    },
    deleteMsg(id) {
      this.$confirm('此操作将永久删除该员工吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request("warningMessage?id=" + id, "delete").then(() => {
          this.loadData()
          Message.success("删除成功")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1
      this.loadData()
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage=val
      this.loadData()
    },
  }
}
</script>
<style scoped>
</style>-->
